<template>
	<view class="cu-modal bottom-modal" :class="{ show: show }">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{title}}</view>
				<view class="action" @tap="hideModal"><text class="cuIcon-close"></text></view>
			</view>
			<view class="password-wrap" :class="{ 'isIphoneX-class': isIphoneX }">
				<view class="code">
					<text class="text-gray padding-xl">{{pwdTips}}</text>
					<view class="code-box flex-row">
						<view class="code-box-item" v-for="i in 6" :key="i">{{ (password[i] && '*') || '' }}</view>
					</view>
					<view class="forget padding" v-show="showForget"><text class="text-gray">忘记密码</text></view>
				</view>
				<view class="digital-key-box clearfix">
					<view class="num" v-for="item in digitalList" :key="item" :class="{ 'no-num': item === '' || item === '-1' }" @click="getKeyNumber(item)">{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {mapGetters} from 'vuex'
import {encrypt, decrypt} from '@/common/tools/encryption.js'
export default {
	props: {
		value: {},
		showForget: {
			default: false,
			type: Boolean
		},
		title: {
			default: '验证安全密码',
			type: String
		},
		pwdTips: {
			default: '安全密码为6位数字，用于提现、设置密保、添加银行卡等操作，可保障资金安全',
			type: String
		},
	},
	computed: {
		...mapGetters(['isIphoneX']),
	},
	data() {
		return {
			digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'], //键盘
			password: '',
			show: false,
		};
	},
	watch: {
		value(value) {
			this.show = value;
		},
		show(value) {
			this.$emit('input', value);
		}
	},
	methods: {
		getKeyNumber(key) {
			if (this.password.length >= 0) {
				if (key === '-1') {
					this.password = this.password.substring(0, this.password.length - 1);
				} else if (key !== '-1' && this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						// 尝试校验密码
						const paw = encrypt(this.password);
						this.password = '';
						this.$emit('confirm', paw);
						// this.hideModal();
					}
				}
			}
		},
		hideModal() {
			this.password = '';
			this.show = false;
			this.$emit('close');
		},
		clear() {
			this.password = '';
		}
	}
};
</script>
<style lang="scss" scoped>
.flex-row {
	display: flex;
	flex-direction: row;
}
.password-wrap {
	background: #f8f8f8;
	.code {
		width: 100%;
		height: 300upx;
		background: #f8f8f8;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		flex-direction: column;
		margin: 30px 0;

		&-box {
			justify-content: center;
			align-items: center;
			border: 1px solid #d0d0d0;

			.code-box-item {
				width: 100upx;
				height: 100upx;
				background: #fff;
				justify-content: center;
				align-items: center;
				font-size: 60upx;
				line-height: 120rpx;
				vertical-align: middle;
				font-weight: bold;
			}

			.code-box-item:not(:last-child) {
				border-right: 1px solid #d0d0d0;
			}
		}
	}

	.forget {
		text-align: right;
		font-size: 26upx;
		line-height: 26upx;
		color: #666;
	}
	/* 键盘 */
	.digital-key-box {
		box-shadow: 0 0 0 2rpx #eee;
		position: relative;
		overflow: hidden;
		width: 100%;

		.num {
			transition: all 0.2s linear;
			float: left;
			background-color: #fff;
			box-shadow: 0 0 0 2rpx #eee;
			width: 33.33333333%;
			cursor: pointer;
			height: 100rpx;
			text-align: center;
			color: #333;
			line-height: 100rpx;
			font-size: 55rpx;
			font-weight: bold;
			position: relative;
			overflow: hidden;
			&:after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				//设置径向渐变
				background-image: radial-gradient(circle, rgba(0, 0, 0, 0.65) 20%, transparent 20%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5);
				opacity: 0;
				transition: transform 0.2s ease-in-out, opacity 0.3s ease-in-out;
			}
			&:active:after {
				transform: scale(0);
				opacity: 0.5;
				//设置初始状态
				transition: 0s;
			}
		}

		.num:nth-of-type(3n + 1) {
			border-bottom: 0;
			border-left: 0;
		}

		.num:nth-of-type(3n + 2) {
			border-bottom: 0;
			border-left: 0;
			border-right: 0;
		}

		.num.no-num {
			background-color: #f8f8f8;
			font-size: 0;
		}

		.num:last-child {
			background: #f8f8f8
				url()
				center center / auto 50rpx no-repeat;
		}
	}
}
</style>
